<template>
  <div class="table_box">
    <el-table :data="tableData" style="width: 100%" height="550">
      <el-table-column prop="name" label="电影名称">
        <template v-slot="{ row }"> 《{{ row.name }}》 </template>
      </el-table-column>
      <el-table-column prop="director" label="导演"> </el-table-column>
      <el-table-column prop="protagonist" label="主演"> </el-table-column>
      <!--  <el-table-column prop="synopsis" label="故事简介"> </el-table-column>
      <el-table-column prop="img" label="电影封面">
        <template v-slot="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.img"
            :fit="fit"
          ></el-image>
        </template>
      </el-table-column> -->
      <el-table-column prop="img" label="操作" width="200">
        <template v-slot="{ row }">
          <el-button type="text" @click="checkOut(row.id, true)"
            >查看</el-button
          >
          <el-button type="text" @click="checkOut(row.id, false)"
            >编辑</el-button
          >
          <el-button type="text" @click="handleDel(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框组件 -->
    <check-dia
      ref="check"
      :visibled.sync="show"
      :checkType="checkType"
      @loadpage="getData"
    />
  </div>
</template>

<script>
import CheckDia from './components/checkDia.vue';
export default {
  components: { CheckDia },
  methods: {
    getData() {
      this.tableData = JSON.parse(localStorage.getItem('infoArr'));
    },
    checkOut(id, type) {
      this.show = true;
      this.$refs.check.getDetail(id);
      this.checkType = type;
    },
    handleDel(id) {
      var i;
      this.tableData.forEach((item, index) => {
        if (item.id === id) {
          i = index;
        }
      });
      this.tableData.splice(i, 1);
      localStorage.setItem('infoArr', JSON.stringify(this.tableData));
    },
  },
  data() {
    return {
      checkType: false,
      show: false,
      tableData: JSON.parse(localStorage.getItem('infoArr')),
    };
  },
};
</script>

<style lang="scss" scoped></style>
